
<template>
  <page-card title="审批统计">
    <div class="table-page-search-wrapper">
      <slot name="searchWrapper" />
      <a-row type="flex"
             style="margin-bottom:20px"
             justify="end">
        <a-col flex="1">
          <a-space>
            <slot name="buttons" />
            <template >
              <a-button type="primary"
                        icon="plus"
                        @click="$refs.StatisticsListExportModal.showModal({
                          'formId': formId,
                          'starterName': starterName,
                          'handleType': handleType,
                          'startTime': startTime
                        })">
                导出
              </a-button>
            </template>
          </a-space>
        </a-col>
        <!-- 过滤条件 -->
        <a-col>
          <a-select v-model="formId" placeholder="来源表单" style="width:180px;margin-right:5px" allow-clear show-search :filter-option="search1">
            <a-select-option v-for="(item, i) in formSource"
                            :key="i"
                            :value="item.formId">
                            {{ item.formName }}
            </a-select-option>
          </a-select>
        </a-col>
        <a-col>
          <a-input v-model="starterName" placeholder="发起人" allow-clear/>
        </a-col>
        <a-col>
          <a-select v-model="handleType" placeholder="流程状态" style="width:180px;margin-left:5px" allow-clear>
            <a-select-option value="已拒绝">已拒绝</a-select-option>
            <a-select-option value="运行中">运行中</a-select-option>
            <a-select-option value="已办结">已办结</a-select-option>
          </a-select>
        </a-col>
         <a-col>
          <a-range-picker style="width: 90%;margin-left:5px" v-model="startTime">
            <template slot="dateRender" slot-scope="current">
              <div class="ant-calendar-date" >
                {{ current.date() }}
              </div>
            </template>
          </a-range-picker>
         </a-col>
        <template>
        </template>
      </a-row>
    </div>
    <slot name="table" />
    <a-table v-if="!$slots.table"
             :columns="columns"
             :rowKey="(record, index) => index"
             :data-source="data"
             @change="handleTableChange"
             :pagination="pagination">
      <template slot="handleType" slot-scope="text, record">
        <a-tag color="red" v-if="record.endActId != '' && record.handleType == 'refuse'">
          已拒绝
        </a-tag>
        <a-tag color="green" v-if="record.endActId == ''">
          运行中
        </a-tag>
        <a-tag v-if="record.endActId != '' && record.handleType != 'refuse'">
          已办结
        </a-tag>
      </template>
    </a-table>
    <!-- 导出信息确认弹窗 -->
    <StatisticsListExportModal ref="StatisticsListExportModal" />
  </page-card>
</template>

<script>
import { flowInstenceStatisticsPage, getFromList } from '../../api/statistics/index'
import { PAGINATION, TABLE_STATUS_CELL } from './constants'
// 导出弹窗
import StatisticsListExportModal from './StatisticsListExportModal.vue'
import moment from 'moment'
const clone = require('clone')
export default {
  components: {
    StatisticsListExportModal
  },
  props: {
    onLoad: {
      type: Function,
      default: null
    },
    onDelete: {
      type: Function,
      default: null
    }
  },
  data () {
    return {
      data: [],
      pagination: PAGINATION,
      statusCell: TABLE_STATUS_CELL,
      // 来源表单
      formId: undefined,
      // 发起人名称
      starterName: '',
      // 流程状态
      handleType: undefined,
      // 流程发起时间区间
      startTime: null,
      // 表单数据源
      formSource: [],
      actions: [],
      columns: [
        {
          title: '标题',
          width: 200,
          dataIndex: 'flowTitle'
        },
        {
          title: '来源表单',
          width: 200,
          dataIndex: 'applicationName'
        },
        {
          title: '发起单位',
          width: 120,
          dataIndex: 'startDeptId',
          ellipsis: true
        },
        {
          title: '发起人',
          align: 'center',
          width: 120,
          dataIndex: 'starterName'
        },
        {
          title: '流程状态',
          width: 100,
          align: 'center',
          dataIndex: 'handleType',
          scopedSlots: { customRender: 'handleType' }
        },
        {
          title: '发起时间',
          align: 'center',
          width: 150,
          dataIndex: 'createTime'
        }
      ]
    }
  },
  activated () {
    // 未重写table，调用默认加载列表数据接口
    !this.$slots.table && this.load()
  },
  computed: {
    queryParam(){
      const result = {}
      const createTimeEndMoment = this.startTime && this.startTime[1] && clone(this.startTime[1])
      result.key = this.formMap[this.formId]?.appKey || undefined,
      result.formId = this.formId,
      result.starterName = this.starterName
      result.handleType = this.handleType
      // 处理时间区间
      result.createTimeStart = this.startTime && this.startTime[0] && this.startTime[0].format('YYYY-MM-DD')
      result.createTimeEnd = createTimeEndMoment && createTimeEndMoment.add (1,'days').format('YYYY-MM-DD') 
      return result
    },
    // 表单id为key的对象
    formMap(){
      const result = {}
      this.formSource.forEach(element => {
        result[element.formId] = {
          formId: element.formId,
          appKey: element.appKey,
          formVersion: element.version,
          formName: element.formName
        }
      });
      return result
   }
  },
  watch: {
    queryParam:{
      deep: true,
      handler() {
        this.search()
      }
    }
  },
  created () {
    // 初始化数据源
    getFromList().then(res => {
      this.formSource = res
    })
  },
  methods: {
    search () {
      this.pagination.current = 1
      this.load()
    },
    load () {
      const queryParam = {
        currPage : this.pagination.current,
        pageSize : this.pagination.pageSize,
        ...this.queryParam
      }
      if (this.onLoad) {
        this.onLoad(queryParam).then((response) => {
          this.data = response.list
          this.pagination.current = response.currPage
          this.pagination.total = response.totalCount
          this.pagination.pageSize = response.pageSize
        })
      } else {
        flowInstenceStatisticsPage(queryParam).then((response) => {
          this.data = response.list
          this.pagination.current = response.currPage
          this.pagination.total = response.totalCount
          this.pagination.pageSize = response.pageSize
        })
      }
    },
    handleTableChange (pagination, filters, sorter) {
      this.pagination = pagination
      this.load()
    },
    search1(value, optionNode){
      return optionNode?.componentOptions?.children[0].text.includes(value)
    }
  },
}
</script>

<style>
</style>
